<!--
 * @Date: 2022-05-31 14:35:24
 * @Author: 陶子
 * @LastEditTime: 2022-08-04 17:04:25
 * @FilePath: \jk_one-stop_pc\src\views\workManagement\reportForm\materialStatistics.vue
 * @pageName: 这是--(用料统计)--页面
-->
<template>
  <div style="height: calc(100vh - 90px)">
    <!--  -->
    <crumbs @goBack="() => {}" :superiorMenu="['生产报表']" currentMenu="用料统计" style="margin-bottom: 12px">
      <span slot="content">
        <div class="topSearch">
          <a-form-model ref="ruleForm" layout="inline" :model="realFilterForm">
            <a-form-model-item label="发生日期：">
              <a-range-picker :allowClear="true" date-format="YYYY-MM-DD" v-model="realFilterForm.happenDate" :disabled-date="disabledDate" style="width: 100%"
                @change="happenChange" />
            </a-form-model-item>
            <a-button @click="handleShowFilter" style="margin-top: 4px" icon="filter">筛选 <span class="filter-num" style="margin-left: 5px">{{ realFilterNum }}</span>
            </a-button>
          </a-form-model>
        </div>
      </span>
    </crumbs>
    <div style="height: 12px; background: #f0f2f5"></div>
    <a-card :bordered="false" style="height: calc(100vh - 285px)">
      <a-tabs v-model="currentTab">
        <a-tab-pane v-for="item in tabList" :key='item.value' :tab='item.title'></a-tab-pane>
      </a-tabs>
      <UseCollect v-show="currentTab==1" :realFilterForm='realFilterForm' @updataQuqery='updataQuqery' />
      <ProductOrder v-show="currentTab==2" :realFilterForm='realFilterForm' @updataQuqery='updataQuqery' />
      <ProductGood v-show="currentTab==3" :realFilterForm='realFilterForm' @updataQuqery='updataQuqery' />
    </a-card>
    <!-- 筛选抽屉 -->
    <a-drawer width="500" :closable="true" :visible="showFilter" @close="closeFilter">
      <div class="filter-body">
        <div slot="title" class="uni-card filter-tit">
          筛选 <span class="filter-num">{{ filteredNums }}</span>
        </div>
        <div class="uni-card" v-if="filteredNums > 0" style="background: #fff">
          <div v-for="(item, i) in filteredList" :key="i" v-show="checkShow(item.text)" class="tag-wrap">
            <span class="filter-tag" @click="delFiltered(item.key)">
              <span class="tag-text">{{ `${item.title}：${item.text}` }}</span>
              <a-icon type="close" style="float: right" />
            </span>
          </div>
        </div>
        <div style="overflow-y: scroll; flex: 1; padding: 0">
          <div class="uni-card" style="background: #fff">
            <a-form-model ref="ruleForm" layout="vertical" :model="filterForm">
              <a-form-model-item label="工单编号">
                <a-input v-model="filterForm.orderCode" placeholder="请输入" />
              </a-form-model-item>
              <a-form-model-item label="产品编号">
                <a-input v-model="filterForm.goodsCode" placeholder="请输入" />
              </a-form-model-item>
              <a-form-model-item label="产品名称">
                <a-input v-model="filterForm.goodsName" placeholder="请输入" />
              </a-form-model-item>
              <a-form-model-item label="规格">
                <a-input v-model="filterForm.goodsSpec" placeholder="请输入" />
              </a-form-model-item>
              <a-form-model-item label="用料编号">
                <a-input v-model="filterForm.materialCode" placeholder="请输入" />
              </a-form-model-item>
              <a-form-model-item label="用料名称">
                <a-input v-model="filterForm.materialName" placeholder="请输入" />
              </a-form-model-item>
              <a-form-model-item label="发生日期">
                <a-range-picker :allowClear="true" date-format="YYYY-MM-DD" v-model="filterForm.happenDate" :disabled-date="disabledDate" style="width: 100%" />
              </a-form-model-item>
            </a-form-model>
          </div>
        </div>
        <div class="footer-submit">
          <a-button class="margin-btn" @click="resetFilter">重置</a-button>
          <a-button type="primary" @click="handleFilter">确定</a-button>
        </div>
      </div>
    </a-drawer>
  </div>
</template>
<script>
import moment from 'moment'
import SetColumn from '@/pubComponent/SetColumn.vue'
import crumbs from '@/components/crumbs.vue'
import { mapState } from 'vuex'
import ProductGood from './materialComponents/ProductGood'
import UseCollect from './materialComponents/UseCollect'
import ProductOrder from './materialComponents/ProductOrder'
import { compareDate } from '@/utils/util'
export default {
  components: {
    SetColumn,
    crumbs,
    ProductGood,
    UseCollect,
    ProductOrder,
  },
  data() {
    return {
      tabList: [
        {
          title: '用料汇总',
          value: '1',
        },
        {
          title: '生产工单',
          value: '2',
        },
        {
          title: '生产产品',
          value: '3',
        },
      ],
      currentTab: '1',
      realFilterForm: {
        happenDate: [],
      },
      filterForm: {
        orderCode: '',
        goodsCode: '',
        goodsName: '',
        materialCode: '',
        materialName: '',
        happenDate: [],
      },
      filteredFormLable: {
        orderCode: '工单编号',
        goodsCode: '产品编号',
        goodsName: '产品名称',
        materialCode: '用料编号',
        materialName: '用料名称',
        happenDate: '发生日期',
        goodsSpec:'规格',
      },
      showFilter: false, // 筛选抽屉
    }
  },

  computed: {
    ...mapState({
      collapsed: (state) => state.user.collapsed,
    }),
    realFilterNum() {
      let nums = 0
      for (let key in this.realFilterForm) {
        if (this.realFilterForm[key] != null && this.realFilterForm[key] != '') {
          nums += 1
        }
      }
      return nums
    },
    filteredNums() {
      let nums = 0
      for (let key in this.filterForm) {
        if (this.filterForm[key] != '' && this.filterForm[key] != null && this.filterForm[key] != undefined) {
          nums += 1
        }
      }
      return nums
    },
    filteredList() {
      let list = []
      for (let key in this.filterForm) {
        if (key == 'happenDate' && this.filterForm[key].length > 0) {
          list.push({
            title: this.filteredFormLable[key],
            text:
              moment(this.filterForm[key][0]).format('YYYY-MM-DD') +
              '.' +
              moment(this.filterForm[key][1]).format('YYYY-MM-DD'),
            key,
          })
        } else {
          list.push({
            title: this.filteredFormLable[key],
            text: this.filterForm[key],
            key,
          })
        }
      }
      return list
    },
  },
  created() {
    let myDate = new Date()
    let month = myDate.getMonth()
    let startDate = moment().month(month).date(1).hours(0).minutes(0).seconds(0).milliseconds(0)
    let endDate = moment()
    this.realFilterForm.happenDate = [startDate, endDate]
  },
  methods: {
    updataQuqery(tableFilterForm) {
      this.realFilterForm = JSON.parse(JSON.stringify(tableFilterForm))
    },
    disabledDate(current) {
      let nowMon = new Date()
      if (moment(nowMon).isBefore(moment(current))) {
        return true
      }
      return false
    },
    /* 出入库日期选择 */
    happenChange(value) {
      this.filterForm = JSON.parse(JSON.stringify(this.realFilterForm))
    },

    checkShow(item) {
      let currentBoolean = Array.isArray(item)
      if (currentBoolean) {
        if (item.length == 0) {
          return false
        } else {
          return true
        }
      } else {
        if (item) {
          return true
        } else {
          return false
        }
      }
    },

    /* 打开筛选 */
    handleShowFilter() {
      this.filterForm = JSON.parse(JSON.stringify(this.realFilterForm))
      console.log('这是啥：', this.filterForm.happenDate)
      this.showFilter = true
    },
    /* 关闭筛选 */
    closeFilter() {
      this.showFilter = false
    },

    /* 确定筛选 */
    handleFilter() {
      this.realFilterForm = JSON.parse(JSON.stringify(this.filterForm))
      this.showFilter = false
    },
    /* 重置筛选 */
    resetFilter() {
      this.filterForm = {
        orderCode: '',
        goodsCode: '',
        goodsName: '',
        goodsSpec:'',
        materialName: '',
        happenDate: [],
      }
    },
    /* 删除已选 */
    delFiltered(key) {
      if (key == 'happenDate') {
        this.filterForm.happenDate = []
      } else {
        this.filterForm[key] = ''
      }
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';
// @import '~@assets/less/common.less';
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.topSearch {
  padding: 0 0 10px 38px;
}
@import '~@/assets/less/public.less';
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.table-operations {
  margin-bottom: 16px;
}

.table-operations > button {
  margin-right: 8px;
}
.topBox {
  .flex(space-between, center);
  margin-bottom: 16px;
}
.searchWorkOreder {
  .flex(flex-start, center);
  padding: 8px;
}
.pubColor {
  font-size: 14px;
  color: #1890ff;
  cursor: pointer;
}
/deep/ .ant-card-body {
  height: calc(100vh - 214px);
  overflow: hidden;
  padding: 20px 16px;
}
.filter-tit {
  background: #fff;
  border-bottom: 1px solid @greyBorder;
  font-size: @fontSize4;
}
.filter-num {
  color: @normalFont;
}
.filter-body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.margin-btn {
  margin-right: @distance5;
}
.filter-tag {
  display: inline-block;
  position: relative;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: @fontSize1;
  line-height: @fontSize1;
  max-width: 100%;
  background: @greyBg;
  color: @titFont;
  cursor: pointer;
  .tag-text {
    display: inline-block;
    padding-right: 20px;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .anticon-close {
    position: absolute;
    right: 8px;
    top: 8px;
  }
}
.tag-wrap:nth-of-type(n + 2) {
  margin-top: 10px;
}
.searchWorkOreder {
  .flex(flex-start, center);
  padding: 8px;
}
.modalTopBox {
  .flex(flex-start, center);
  margin-bottom: 8px;
  span {
    margin-left: 16px;
    display: block;
    overflow: hidden;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
  }
}
.bigFont {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.78);
  box-sizing: border-box;
  padding-left: 12px;
  margin-bottom: 8px;
  font-weight: 600;
}
.smallFont {
  font-size: 14px;
  box-sizing: border-box;
  padding-left: 12px;
}
</style>
